<template>
	<view class="content">
		<view class="row jd">
			<view class="col-24 t_center">
				<image src="../../static/public/jd.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="row">
			<view class="wx col-24 t_center t_size_bold">
				遇到危险，请向警方求助
			</view>
			<view class="hbjl col-24 t_center t_size_28">
				谎报警情可能会被处以5日以上10日以下拘留
			</view>
		</view>
		<view class="row dqwz">
			<view class="col-24">
				<view class="row dqckwz">
					<view class="col-2">
						<image src="../../static/public/dzdw.png" mode="heightFix"></image>
					</view>
					<view class="col-20 t_size_28">
						当前参考位置
					</view>
				</view>
				<view class="row dqwzxq">
					<view class="col-20 off-2 t_size_28">
						{{message.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="primary">呼叫110</button>
		</view>
		<view class="tgxxgjf t_size_28">
			点击后会将您的行程信息共享给紧急联系人并按照警方要求共享给警方
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js');
	export default {
		data(){
			return {
				message:{
					text:'获取中...',
					location: {
						latitude: 0,
						longitude: 0
					}
				}
			}
		},
		onLoad() {
			var qqmask = new QQMapWX({
				key: 'FFJBZ-32W6O-ZTPWU-S6G2B-AJB3Z-DKBV7'
			})
			let that = this;
			// #ifdef MP-WEIXIN
			wx.getLocation({
				success(res){
					that.message.location.longitude = res.longitude;
					that.message.location.latitude = res.latitude;
					qqmask.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						get_poi: 1,
						success: async (result) => {
							that.message.text = result.result.address;
						}
					})
				}
			})
			// #endif
		}
	}
</script>

<style lang="scss">
	.jd{
		padding-top: 80rpx;
		padding-bottom: 59rpx;
		image{
			width: 140rpx;
		}
	}
	.wx{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 45rpx;
		color: #6CBF30;
	}
	.hbjl{
		padding-top: 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999999;
	}
	.dqwz{
		width: 80%;
		padding: 25rpx 4%;
		margin-left: 6%;
		margin-top: 60rpx;
		border-radius: 11rpx;
		box-shadow: 0px 5rpx 20rpx 0px #EDEDED;
		.dqckwz{
			color: #999999;
			height: 50rpx;
			line-height: 50rpx;
			image{
				height: 30rpx;
				margin-top: 10rpx;
			}
		}
		.dqwzxq{
			padding-top: 9rpx;
			color: #333333;
		}
	}
	.btn{
		width: 92%;
		padding: 0 4%;
		margin-top: 220rpx;
		button{
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			background-color: #6CBF30;
		}
	}
	.tgxxgjf{
		width: 88%;
		margin-left: 6%;
		margin-top: 31rpx;
		color: #B3B3B3;
	}
</style>
